<template>
	<view class="my-page" :style="{ 'paddingTop': CustomBar + 'px' }">
		<view class="my-page-bg"></view>
		<view class="userinfo" @click="handUserInfo">
			<template v-if="userInfo.id">
				<image class="avatar" :src="userInfo.avatar || '/static/user/avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{ userInfo.nickName }}</view>
					<view class="ids">ID:{{ userInfo.id }}</view>
				</view>
			</template>
			<template v-else>
				<image class="avatar" src="/static/user/avatar.png" mode="aspectFill"></image>
				<view class="info">
					<view class="name">去登陆</view>
				</view>
			</template>
		</view>
		<view class="commission">
			<image class="bg" src="/static/user/vip-bg.png" mode=""></image>
			<view class="commission-left">
				<view class="name">累计佣金(元)</view>
				<view class="num">{{ userInfo.brokerage || 0 }}</view>
			</view>
			<button class="cu-btn" @click="handReward">查看明细</button>
		</view>
		<view class="auth">
			<view class="flex align-center justify-between">
				<view class="auth-card" @click="handCarAuth">
					<image src="/static/user/icon1.png" mode=""></image>
					<text>车商认证</text>
				</view>
				<view class="auth-card" @click="handDemand">
					<image src="/static/user/icon2.png" mode=""></image>
					<text>车商中心</text>
				</view>
			</view>
			<template v-if="userInfo.merchant">
				<view class="error-tip" v-if="userInfo.merchant.status === 'AUDIT_REJECT'">
					拒绝原因: {{ userInfo.merchant.reason }}
				</view>
				<view class="audit-tip" v-if="userInfo.merchant.status === 'AUDIT'">
					审核中,请耐心等待
				</view>
			</template>
			<view class="ggz flex" @click="handGzh"
				v-if="userInfo.id && ['PLATFORM_MERCHANT', 'PERSON_MERCHANT'].includes(userInfo.userType) && !userInfo.isPublicOpenId">
				<text>请关注公总号, 开启消息通知</text>
				<view class="flex ggz-go">
					<text>去关注</text>
					<uv-icon name="arrow-right" color="#fff" size="28rpx"></uv-icon>
				</view>
			</view>
		</view>
		<view class="tool-card">
			<view class="nav-title">常用工具</view>
			<view class="grid">
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/demand')">
					<image src="/static/user/tool/icon1.png" mode=""></image>
					<text>我的需求</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/promotion')">
					<image src="/static/user/tool/icon2.png" mode=""></image>
					<text>我的推广</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/follow')">
					<image src="/static/user/tool/icon3.png" mode=""></image>
					<text>我的关注</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/coll')">
					<image src="/static/user/tool/icon4.png" mode=""></image>
					<text>我的收藏</text>
				</button>
				<button class="cu-btn grid-item" open-type="contact">
					<image src="/static/user/tool/icon5.png" mode=""></image>
					<text>联系客服</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/system')">
					<image src="/static/user/tool/icon6.png" mode=""></image>
					<text>系统消息</text>
				</button>
				<button class="cu-btn grid-item" open-type="feedback">
					<image src="/static/user/tool/icon7.png" mode=""></image>
					<text>意见反馈</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/about')">
					<image src="/static/user/tool/icon8.png" mode=""></image>
					<text>关于我们</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/address/list')">
					<image src="/static/user/tool/icon9.png" mode=""></image>
					<text>地址管理</text>
				</button>
				<button class="cu-btn grid-item" @click="handJump('/pagesA/user/info')">
					<image src="/static/user/tool/icon10.png" mode=""></image>
					<text>设置</text>
				</button>
			</view>
		</view>
		<car-auth ref="carRef" />
		<tabbar-bottom :curren="3" />
	</view>
</template>

<script setup>
	import TabbarBottom from '@/components/tabbar/TabbarBottom.vue'
	import CarAuth from '@/components/CarAuth.vue'
	import {
		ref
	} from "vue";
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		doBinGgh
	} from '@/apis/user.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		storeToRefs
	} from 'pinia'
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	const system = uni.getSystemInfoSync()
	const StatusBar = system.statusBarHeight
	let custom = wx.getMenuButtonBoundingClientRect();
	let CustomBar = custom.bottom + custom.top - system.statusBarHeight;
	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo
	} = storeToRefs(useStore)
	const {
		doUserInfo
	} = (useStore)
	const carRef = ref()
	const handCarAuth = async () => {
		await handUser()
		if (userInfo.value?.merchant?.status === 'AUDIT') {
			uni.$uv.toast('审核中,请耐心等待')
			return
		}
		if (userInfo.value.userType !== 'COMMON') {
			uni.$uv.toast('认证已通过')
			return
		}
		handJump('/pagesA/car/auth')
	}

	const handGzh = () => {
		uni.navigateTo({
			url: '/pagesA/user/web_view'
		})
	}

	const handDemand = async () => {
		await handUser()
		if (userInfo.value?.merchant?.status === 'AUDIT') {
			uni.$uv.toast('审核中,请耐心等待')
			return
		}
		if (userInfo.value.userType === 'COMMON') {
			carRef.value.handOpen()
			return
		}
		handJump('/pagesA/dealers/home')
	}

	const handReward = async () => {
		await handUser()
		handJump('/pagesA/user/priceDetail')
	}

	const handUserInfo = async () => {
		await handUser()
		uni.navigateTo({
			url: '/pagesA/user/info'
		})
	}

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			handJump('/pagesA/login/login')
			rej('请先登录')
		})
	}

	const handJump = async (url) => {
		if (!['/pagesA/login/login', '/pagesA/user/about'].includes(url)) {
			await handUser()
		}
		uni.navigateTo({
			url
		})
	}

	onLoad((e) => {
		uni.hideTabBar()
	})

	onShow(async () => {
		if (userInfo.value?.id) {
			const wxCode = uni.getStorageSync('wxCode')
			uni.removeStorageSync('wxCode')
			if (wxCode) {
				const data = await doBinGgh({
					code: wxCode
				})
				if (data) {
					uni.$uv.toast('绑定成功')
				} else {
					uni.$uv.toast('绑定失败')
				}
			}
			doUserInfo()
		}
	})
</script>

<style lang="scss" scoped>
	.my-page {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 150rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

		&-bg {
			width: 750rpx;
			height: 408rpx;
			background: linear-gradient(180deg, #F7C241 0%, #F5F5F5 100%);
			position: absolute;
			top: 0;
		}

		.userinfo {
			position: relative;
			z-index: 3;
			padding: 32rpx 34rpx;
			display: flex;
			align-items: center;

			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			.info {
				flex: 1;
				margin-left: 26rpx;

				.name {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.ids {
					margin-top: 8rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.commission {
			position: relative;
			z-index: 3;
			width: 640rpx;
			margin: 30rpx auto 0 auto;
			background-color: #707070;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 40rpx;
			box-sizing: border-box;

			.bg {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			&-left {
				position: relative;
				z-index: 2;

				.name {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #BDBDBD;
				}

				.num {
					margin-top: 10rpx;
					font-size: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F8F8F8;
				}
			}

			.cu-btn {
				position: relative;
				z-index: 2;
				height: 60rpx;
				background: linear-gradient(180deg, #FFDBB7 0%, #F9AE5F 100%);
				border-radius: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E1A24;
			}
		}

		.auth {
			position: relative;
			z-index: 3;
			background-color: #fff;
			width: 686rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			padding: 32rpx;
			box-sizing: border-box;

			&-card {
				width: 298rpx;
				height: 138rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFF0E5;
				border-radius: 16rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #1E1A24;
				}

				&:last-child {
					image {
						width: 90rpx;
					}
				}
			}

			.error-tip {
				margin-top: 20rpx;
				color: orangered;
				font-size: 28rpx;
			}

			.audit-tip {
				margin-top: 20rpx;
				color: #FF9113;
				font-size: 28rpx;
			}

			.ggz {
				margin-top: 20rpx;
				background-color: #FF9113;
				font-size: 28rpx;
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				color: #fff;
				align-items: center;
				justify-content: space-between;
			}
		}

		.tool-card {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 24rpx auto 0 auto;
			padding-bottom: 20rpx;

			.nav-title {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #1E1A24;
				padding: 32rpx 32rpx 20rpx 32rpx;
			}

			.grid {
				display: flex;
				flex-wrap: wrap;
				gap: 15rpx 0;

				&-item {
					width: 25%;
					height: 160rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: rgba(255, 255, 255, 0);

					image {
						width: 88rpx;
						height: 88rpx;
					}

					text {
						margin-top: 16rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1E1A24;
					}
				}
			}
		}
	}
</style>